<template>
<layout :thumb="item.mainImageUrl" :label="item.label" :soldOut="!item.redundancyMinPrice" @click="$emit('click')">
  <div class="ticket-content" :class="{soldOut: !item.redundancyMinPrice}" >
    <p class="ticket-title">
      <rich-text class="rich_text" :nodes="item.productName">
      </rich-text>
    </p>
    <div class="ticket-seize-wrap">
        <div class="ticket-tags">
          <!-- 隐藏卖点 -->
          <!-- <tagsItem 
            v-if="item.sellingPoints &&item.sellingPoints.length > 0" 
            :item="item.sellingPoints[0].replace('景区','')"
            :showIcon="false"
          >
            <view slot="icon"><image class="good-icon" src="/static/good.png"/></view>
          </tagsItem> -->
          
          <!-- 景区级别 -->
          <tagsItem v-if="item.starLevel" :showIcon="false" :item="item.starLevel + 'A级景区'">
            <view slot="icon"><image class="good-icon" src="/static/good.png"/></view>
          </tagsItem>
          <tagsItem background="rgba(141, 152, 175, 0.1)" color="rgba(141, 152, 175, 1)" v-for="tag in item.tagNames" :item="tag" :key="tag" />
        </div>
        <div class="ticket-area-distance" v-if="item.distance && showDistance">
          <!-- <p class="ticket-area">{{ item.areaName }}</p> -->
          <template>
            <!-- <p class="gap">|</p> -->
            <p class="ticket-distance">距离我{{ item.distance | distanceText }}</p>
            <!-- <p class="ticket-distance">无法获取距离</p> -->
          </template>
        </div>
        <!-- 营业时间字段后端还在处理 -->
        <!-- <div class="ticket-time--wrap">      
          <div class="ticket-time" v-if="item.openingHours">营业时间：{{ item.openingHours }}</div>
        </div> -->
    </div>
        
    <div class="sell-points-price">
      <!-- <div class="sell-points">
        <div class="sell-point" v-for="point in item.sellingPoints" :key="point"> <span class="tag-font">&#xe801;</span> {{ point }}</div>
      </div> -->
      <div v-if="item.redundancyMinPrice">
        <basic-price :price="item.redundancyMinPrice" size="36rpx" :weight="600" unitSize="24rpx" color="#FF5944" unitColor="#FF5944" />
        <span class="sub-text">起</span>
      </div>
    </div>
  </div>
</layout>
</template>

<script>
import layout from './normal-layout'
import tagsItem from './tags-item'

export default {
  props: {
    item: { type: Object, default: () => ({}) },
    showDistance: { type: Boolean, default: true }
  },
  data(){
    return {
    }
  },
  components: { 
    layout,
    tagsItem
  },
  methods: {
    onItem(ev) {
      // gotoDetail
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/style/iconfont.less";
.soldOut{
  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
  filter: grayscale(100%);
}
.sub-text {
  color: @font_light_color;
  font-size: 20rpx;
  font-weight: normal;
  padding-left: 5rpx;
}
.ticket-title {
  .line-ellipsis;

  font-size: 28rpx;
  color: @font_color;
  font-weight: 600;
  margin-bottom: 8rpx;
}

.ticket-seize-wrap{
  height: 110rpx;
}

.ticket-tags {
  font-size: 0;
  margin-top: 8rpx;
  display: flex;
  flex-wrap: wrap;
  .good-icon{
    height: 28rpx;
    width: 28rpx;
    margin-right: 4rpx;
    display: block;
  }
}




.ticket-area-distance {
  font-size: 20rpx;
  color: @font_light_color;
  display: flex;
  align-items: center;
  margin-bottom: 4rpx;
  height: 28rpx;
  line-height: 28rpx;
  
  .gap {
    margin-left: 16rpx;
    margin-right: 16rpx;
  }
}
.ticket-time--wrap{
  height: 28rpx;
  line-height: 28rpx;
  margin: 4rpx 0;
  .ticket-time {
    font-size: 20rpx;
    color: @font_light_color;
    line-height: 28rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.sell-points-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .sell-points {
    font-size: 0;
    .sell-point {
      .round-tag(28rpx, 8rpx);

      display: inline-block;
      color: @font_light_color;
      font-size: 20rpx;
      background-color: fade(@font_light_color, 10%);
      text-align: center;
      margin-right: 6rpx;
    }

    .tag-font {
      .iconfont();

      font-size: 20rpx;
      margin-right: 4rpx;
      color: @font_light_color;
    }
  }

}
</style>